<template>
    <div class="ma-act-wrap">
      <ul class="ma-act-wrap-list">
        <template v-if="platData.length">
          <li class="ma-act-wrap-item" v-for="(item,index) in platData" :key="index">
            <div class="ma-act-wrap-left">
              <div class="ma-act-img">
                <img :src="item.platformIcon">
              </div>
              <div class="ma-act-text">
                  <p class="ma-text-top">{{item.platformName}}</p>
                  <p class="ma-text-ellipsis" :title="item.username">{{item.username}}</p>
              </div>
            </div>
            <div class="ma-act-wrap-right">
              <div class="ma-act-wrap-btn" @click="unlock(item)">解绑</div>
            </div>
          </li>
        </template>
        <li class="plat-btn" v-else>帐号空空如也  ,请点击进入<span @click="jump">添加帐号</span></li>
      </ul>
    </div>
</template>
<script>
export default {
  // async asyncData(context) {
  //     await context.$axios.$post('accountList').then((res)=>{
  //         if (res.status) {
  //             platData = res.obj
  //         }else{
  //             platData = res.msg
  //         }
  //     }).catch(function (error) {
              
  //     });
  //     return {platData}
  // },
  async fetch({store}) {
    await store.commit('setMultiPlat', 2)
  },
  layout: 'intermulti',
  data(){
    return{
       platData:[], // 绑定的平台
       test:''
    }
  },
  beforeCreate(){
  },
  created() {

  },
  mounted(){
    this.getAccountList();
    if(this.$route.query.code!=null && !this.$route.query.state!=null){
      //绑定
      this.authorizeSave();
    }
  },
  methods:{
    jump(){
      this.$router.replace('/multiPlat/addAcut');
    },
    // 账户管理初始化获取绑定的平台列表
    getAccountList() {
      let _this = this;
      this.$axios.$post('accountList').then(res => {
        if(res.status === 200){
          _this.platData = res.obj;
        }else{
          this.$message({
            message:res.msg, 
            type:'warning',
          })
         }
      })
      .catch(err => {
        this.$message({
          message:'请求失败',  
          type:'warning'
        })
      })
    },
    //绑定
    authorizeSave() {
      let params ={
        code:this.$route.query.code,
        state:this.$route.query.state,
        shopId:this.$route.query.shopId,
      }
      this.$axios.$post('authorizeSave',params).then(res => { //认证信息保存
        if(res.status != 200){  //不等于200
          if(this.test){
            this.test.close()
          }
          this.test =  this.$message({
            message:res.msg,  
            type:'warning'
          })
        }
        this.$router.push('/multiPlat/manageAcut');
        setTimeout(() => {
            window.location.reload()
        }, 100);
      })
    },
    unlock(item) {
      this.$confirm('确定解绑快手平台账号吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.unBind(item);
        this.getAccountList(); //刷新页面
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消绑定',
        //   duration:1000
        // });      
      });
    },
    unBind(item) { //解绑帐号
      let params = {
        shopId: item.shopId,
      };
      this.$axios.$post('unBindKsAccount',params).then(res => {
        if(res.status === 200){
          this.getAccountList(); //刷新页面
          this.$message({
            type: 'success',
            message: '解绑成功!',
            duration:1000,
          });
        }else{
          this.$message({
            message:res.msg,  
            type:'warning'
          });
         }
      })
      .catch(err => {
        this.$message({
          message:'请求失败',  
          type:'warning'
        });
      })
    },
  }
}
</script>

<style scoped>
  .ma-act-wrap{
    min-width:1200px;
    margin: 22px auto 0 auto;
  }
  .ma-act-wrap-list{
    font-size:16px;
    color:#666666;
    font-weight:bold;
    padding-left:20px;
  }
  .ma-act-wrap-item{
    padding:38px;
    height:120px;
    display:flex;
    background:#ffffff;
    border-radius:4px;
    box-sizing:border-box;
    float:left;
    margin:0 20px 20px 0;
  }
  .ma-act-wrap-left{
    display:flex;
  }
  .ma-act-img{
    width:53px;
    height:53px;
  }
  .ma-act-img img{
    width:100%;
    height:100%;
    border-radius: 10px;
  }
  .ma-act-text{
    margin-left:10px;
  }
  .ma-text-top{
    color:#333333;
    margin-bottom:15px;
  }
  .ma-text-ellipsis{
    width: 140px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ma-act-wrap-right{
    display:flex;
    height:53px;
    flex-direction:column;
    justify-content:flex-end;
    margin-left:84px;
  }
  .ma-act-wrap-btn{
    width:58px;
    height:27px;
    line-height:27px;
    text-align:center;
    font-size:14px;
    background:#f0f9fe;
    color:#0096e6;
    border-radius:15px;
    cursor:pointer;
    user-select:none;
    box-sizing:border-box;
  }
  .ma-act-wrap-btn:hover{
    background:#0096e6;
    color:#ffffff;
  }
  .plat-btn{
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius:4px;
    font-weight:400;
  }
  .plat-btn span{
    margin-left:10px;
    display:inline-block;
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#0096e6;
    color:#ffffff;
    user-select:none;
    cursor:pointer;
    border-radius:20px;
  }
  .plat-btn span:hover{
    background:#409EFF;
  }
</style>
